<template>
    <section class="form-container">
        <el-form :inline="true" :model="filter" size="mini" class="form-filter">
            <el-form-item label="手机号">
                <el-input v-model="filter.mobile" placeholder="请输入条件查询"/>
            </el-form-item>
            <el-form-item label="UID">
                <el-input v-model="filter.uid" placeholder="请输入条件查询"/>
            </el-form-item>
            <el-form-item label="登录名">
                <el-input v-model="filter.username" placeholder="请输入条件查询"/>
            </el-form-item>

            <el-form-item label="姓名">
                <el-input v-model="filter.realName" placeholder="请输入条件查询"/>
            </el-form-item>
            <el-form-item label="身份证号">
                <el-input v-model="filter.idCard" placeholder="请输入条件查询"/>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getPage()" icon="el-icon-search">查询</el-button>
                <el-button @click="showAdd()" icon="el-icon-plus">添加</el-button>
            </el-form-item>
        </el-form>
        <div class="form-content">
            <el-table
                v-loading="loading"
                style="width: 100%"
                :data="page.records"
                border
                stripe
                :header-cell-style = "headerCellStyle"
            >
                <el-table-column width="60" prop="uid" label="UID"/>
                <el-table-column width="80" label="头像">
                    <template #default="scope">
                        <el-image style="width: 50px; height: 50px" :src="scope.row.headImg"
                                  fit="cover">
                            <div slot="error" class="image-slot" style="display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background: #f5f7fa;color: #909399;font-size: 20px;">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="昵称"/>
                <el-table-column prop="mobile" label="手机号" width="110"/>
                <el-table-column prop="username" label="登录名"/>
<!--                <el-table-column prop="realName" label="姓名"/>-->
                <el-table-column prop="credit" label="积分"></el-table-column>
                <el-table-column prop="shareUid" label="分享人"></el-table-column>
                <el-table-column prop="adminId" label="管理员ID"></el-table-column>
                <el-table-column label="状态" width="80px">
                    <template #default="scope">
                        <el-switch
                            v-model="scope.row.status"
                            @change="statusSwitch(scope.row.status,scope.row.uid)"
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="updateName" label="更新人"/>
                <el-table-column prop="updateTime" label="更新时间"/>

                <el-table-column fixed="right" label="操作" width="220">
                    <template #default="scope">
                        <el-button size="mini" type="text" style="margin:0 0px 10px 10px;" @click="showUpdate(scope.row)">编辑
                        </el-button>

                        <el-button size="mini" type="text" @click="showUpdateCredit(scope.row)"
                                   style="margin:0 0px 10px 10px;">修改积分
                        </el-button>
                        <el-popconfirm title="确定删除吗？" @onConfirm="handleDelete(scope.row.uid)">
                            <template #reference>
                                <el-button slot="reference" size="mini" type="text" style="margin:0 0px 10px 10px;">删除
                                </el-button>
                            </template>
                        </el-popconfirm>

                        <el-popconfirm title="确定重置密码吗？" @onConfirm="restPassword(scope.row.uid)">
                            <template #reference>
                                <el-button slot="reference" size="mini" type="text" style="margin:0 0px 10px 10px;">重置密码
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                background
                :current-page="page.current"
                :page-sizes="[10, 20, 30, 50,100]"
                :page-size="page.size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total"
                style="margin-top:20px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
            />

            <Add ref="addRef" @refresh="getPage()"/>
            <Update ref="updateRef" @refresh="getPage()"/>
            <UpdateCredit ref="updateCreditRef" @refresh="getPage()"/>

        </div>
    </section>
</template>
<script>
import {UserApi} from '@/api/user/User'
import Add from './Add.vue'
import Update from './Update.vue'
import UpdateCredit from '../credit/Update.vue'
import {MessageBox} from 'element-ui'

export default {
    name: 'UserAccountList',
    components: {
        Add,Update, UpdateCredit
    },
    data() {
        return {
            page: {
                total: 0,
                size: 10,
                current: 1,
                pages: 0,
                records: []
            },
            filter: {username: '', mobile: '', realName: '', idCard: '', uid: ''},
            loading: false,
            headerCellStyle:{
                "background-color":"#F2F5FC"
            }
        }
    },
    created() {
        this.getPage()
    },
    methods: {
        // 获取用户列表
        getPage() {
            const params = {
                pageIndex: this.page.current,
                pageSize: this.page.size,
                username: this.filter.username,
                mobile: this.filter.mobile,
                uid: this.filter.uid,
                realName: this.filter.realName,
                idCard: this.filter.idCard
            }

            this.loading = true
            UserApi.getPage(params)
                .then((response) => {
                    this.page = response
                    this.loading = false
                }).catch((err) => {
                this.loading = false
            })
        },

        // 修改状态
        statusSwitch(val, uid) {
            const params = {
                uid: uid,
                status: val
            }

            UserApi.updateStatus(params).then((response) => {
            })
        },

        // 删除数据
        handleDelete(uid) {
            UserApi.delete(uid)
                .then((response) => {
                    this.getPage()
                })
        },

        // 重置密码
        restPassword(uid) {
            UserApi.restPassword(uid)
                .then((response) => {
                    MessageBox.alert('密码只显示一次，无法找回，请保存。<br/>新密码：<b style="color:#F00;">' + response + '</b>', '重置成功', {
                        confirmButtonText: '知道了',
                        dangerouslyUseHTMLString: true,
                        callback: () => {
                        }
                    })
                })
        },

        handleSizeChange(val) {
            this.page.size = val
            this.page.current = 1
            this.getPage()
        },

        handleCurrentChange(val) {
            this.page.current = val
            this.getPage()
        },

        showAdd() {
            this.$refs['addRef'].show()
        },
        showUpdate(data) {
            this.$refs['updateRef'].showUpdate(data)
        },

        showUpdateCredit(data) {
            this.$refs['updateCreditRef'].showUpdate(data)
        }

    }
}

</script>

<style lang="scss" scoped></style>
